﻿/**
* Vista asociada a la grafica de datos
* selecionado una region determinada
* en el aplicativo.
*/
Ext.define("entgpv11.view.ContentMenu02.RegionesCharts", {
    extend: "Ext.Container",
    alias: "widget.regionescharts",
    requires: [
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.series.Pie'],
    config: {
        dataArguments: null,
        layout: {
            type: 'fit'
        }
    },
    initialize: function () {
        try {
            this.callParent(arguments);

            var dataObject = this.getDataArguments();
            var sTitle = dataObject.get("region");
            /*
            data: Object
            contraparte: 80000
            id: "289"
            inversion: 180000
            numero: 2
            plan: 100000
            region: "Regional 2"
            */
            var backButton = {
                xtype: "button",
                ui: "back",
                iconCls: "reply", iconMask: true,
                handler: this.onBackButtonTap,
                scope: this
            };
            this.exitButton = {
                xtype: "button",
                ui: 'decline',
                iconCls: "delete", iconMask: true,
                handler: this.onExitButtonTap,
                scope: this
            };
            var topToolbar = {
                xtype: "toolbar",
                title: sTitle.substring(0,10)+'...',
                docked: "top",
                items: [
					        backButton,
					        { xtype: 'spacer' },
                            this.exitButton
				        ]
            };
            var p = Number(dataObject.get("plan"));
            var c = Number(dataObject.get("contraparte"));
            var i = Number(dataObject.get("inversion"));
            var pc = 0;
            var cc = 0;
            i = i.toFixed(2);
            if (p != 0 && i != 0) {
                pc = (p * 100) / i;
            }
            if (c != 0 && i != 0) {
                cc = (c * 100) / i;
            }
            pc = Number(pc);
            cc = Number(cc);
            var store = new Ext.data.JsonStore({
                fields: ['name', 'name1', 'data1'],
                data: [
					        { 'name': 'Contraparte', 'name1': 'Contraparte ' + cc.toFixed(2) + ' %', 'data1': cc.toFixed(2) },
                //{'name':'Inversion','name1':'Inversion '+i+' %', 'data1':i},
					        {'name': 'Plan', 'name1': 'Plan ' + pc.toFixed(2) + ' %', 'data1': pc.toFixed(2) }
				        ]
            });

            var barChart = new Ext.chart.Chart({
                renderTo: Ext.getBody(),
                insetPadding: 50,
                width: 400,
                height: 300,
                animate: {
                    easing: 'bounceOut',
                    duration: 750
                },
                store: store,
                gradients: [
								        {
								            'id': 'v-1',
								            'angle': 0,
								            stops: {
								                0: {
								                    color: 'rgb(212, 40, 40)'
								                },
								                100: {
								                    color: 'rgb(117, 14, 14)'
								                }
								            }
								        },
								        {
								            'id': 'v-2',
								            'angle': 0,
								            stops: {
								                0: {
								                    color: 'rgb(180, 216, 42)'
								                },
								                100: {
								                    color: 'rgb(94, 114, 13)'
								                }
								            }
								        }
						        ],
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Valores',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Datos'
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    renderer: function (sprite, storeItem, barAttr, i, store) {
                        barAttr.fill = "url(#v-" + (i % colors.length + 1) + ")";
                        return barAttr;
                    },
                    tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function (storeItem, item) {
                            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
                        }
                    },
                    label: {
                        display: 'insideEnd',
                        'text-anchor': 'middle',
                        field: 'data1',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'vertical',
                        color: '#333'
                    },
                    xField: 'name',
                    yField: 'data1'
                }],
                interactions: [
								        {
								            type: 'panzoom',
								            axes: ['bottom']
								        }
							        ]
            });

            var pieChart = new Ext.chart.Chart({
                store: store,
                shadow: false,
                animate: true,
                insetPadding: 20,
                width: 400,
                height: 300,
                legend: {
                    position: 'left'
                },
                interactions: [
						        {
						            type: 'reset',
						            confirm: true
						        },
						        {
						            type: 'rotate'
						        },
						        'itemhighlight',
						        {
						            type: 'iteminfo',
						            gesture: 'longpress',
						            listeners: {
						                show: function (interaction, item, panel) {
						                    var storeItem = item.storeItem;
						                    panel.setHtml(['<ul><li><b>Valor: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('data1') + '</li></ul>'].join(''));
						                }
						            }
						        }
					        ],
                series: [
						        {
						            type: 'pie',
						            field: 'data1',
						            donut: 25,
						            showInLegend: true,
						            highlight: false,
						            //when labels overflow the pie slice, set to use a callout.
						            listeners: {
						                'labelOverflow': function (label, item) {
						                    item.useCallout = true;
						                }
						            },
						            // Example to return as soon as styling arrives for callouts
						            callouts: {
						                renderer: function (callout, storeItem) {
						                    callout.label.setAttributes({
						                        text: storeItem.get('name')
						                    }, true);
						                },
						                filter: function () {
						                    return false;
						                },
						                box: {
						                //no config here.
						            },
						            lines: {
						                'stroke-width': 2,
						                offsetFromViz: 20
						            },
						            label: {
						                font: 'italic 14px Arial'
						            },
						            styles: {
						                font: '14px Arial'
						            }
						        },
						        label: {
						            field: 'name1'
						        }
						    }
				          ]
            });

            /*	
            var bottomToolbar = {
            xtype: "toolbar",
            docked: "bottom",
            items: [
					
            ]
            };
            */
            var tabs01 =
			        {
			            xtype: 'panel',
			            title: 'Pastel',
			            iconCls: 'arrow_left',
			            items: [pieChart]

			        };
            var tabs02 = {
                xtype: 'panel',
                title: 'Barras',
                iconCls: 'arrow_right',
                items: [barChart]
            };

            var tabGlobal = Ext.create('Ext.TabPanel', {
                scrollable: 'vertical',
                tabBarPosition: 'bottom',
                styleHtmlContent: true,
                items: [tabs01, tabs02, {
                    title: 'Datos',
                    iconCls: 'info',
                    html: '<ul><li><b>Inversion: </b>' + dataObject.get('inversion') + '</li><li><b>contraparte: </b> ' + dataObject.get('contraparte') + '</li>' + '<li><b>Plan: </b> ' + dataObject.get('plan') + '</li></ul>'
                }] // items
            }); // create()

            this.add([topToolbar, tabGlobal]);
        } catch (ex) {
            APP_GLOBAL.SetLog('RegionesCharts.initialize::' + ex);
        }
    },
    onBackButtonTap: function () {
        //console.log("backButtonTap");
        this.fireEvent("backButtonMenu02Command", this);
    },
    onExitButtonTap: function () {
        this.fireEvent("exitButtonTapCommand", this);
    }

});